<template>
  <div class="task-container main-wrapper">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="测试中" name="queue"></el-tab-pane>
      <el-tab-pane label="已完成" name="finish"></el-tab-pane>
    </el-tabs>
    <div class="finish-container">
    <!--搜索工具条-->
    <div class="search-wrap">
      <div class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters" size="small">
          <el-form-item>
            <el-input
              v-model="filters.session_name"
              clearable
              placeholder="请输入作业名称"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="filters.session_id"
              clearable
              placeholder="请输入作业ID"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="operaution-btn-group">
        <TaskButtonGroup fromPage="taskRun" @openDeleteDialog="openDeleteDialog"/>
      </div>
    </div>
    <TaskTable />
     <!--弹窗-->
     <DeleteDialog :visible="isVisibleDeleteModal" :content="deleteContentText" @closeDialog="closeDeleteDialog" @submitDelete="submitDelete"/>
  </div>
</div>
</template>
<script>
import { mapGetters , mapState} from 'vuex'
import TaskButtonGroup from '../components/TaskButtonGroup.vue'
import TaskTable from './comonents/TaskTable.vue'
import DeleteDialog from '@/components/DeleteDialog'
import {deleteTask } from '@/api/task'
export default {
  name: 'Task',
  components:{TaskButtonGroup, TaskTable, DeleteDialog},
  data(){
    return{
      activeName: 'queue',
      filters:{
        session_name:'',
        session_id: ''
      },
      isVisibleDeleteModal: false,
      deleteContentText:'确认删除该作业吗？',
    }
  },
  computed:{
    ...mapGetters(['selectedIds']),
    ...mapState({
        isFinish: state => state.task.isFinish,
      })
   
  },
  watch:{
    filters:{
      deep:true,
      handler: function(){
        this.$store.dispatch('task/setTaskFilters', this.filters)
      }
    },
  },
  mounted(){
    if(this.isFinish){
      this.activeName = 'finish'
    }else {
      this.activeName = 'queue'
    }
  },
  methods: {
    handleClick(tab) {
      console.log('tab',tab)
      if (tab.name === 'queue') {
        this.$store.dispatch('task/setIsFinish', false)
      } else if (tab.name === 'finish') {
        this.$store.dispatch('task/setIsFinish', true)
      }
    },
    openDeleteDialog(){
      this.isVisibleDeleteModal = true
    },
    closeDeleteDialog(){
      this.isVisibleDeleteModal = false
    },
    submitDelete(){
      let params = {'id':this.selectedIds}
      deleteTask(params).then((res) => {
        this.$message({
          message: '删除作业成功',
          type: 'success'
        })
        this.$store.dispatch('task/setTaskRunFresh', true)
        this.isVisibleDeleteModal = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .task-container{
    padding: 0 22px;
    .search-wrap{ 
      height: 40px;
      .toolbar {
        .el-form-item{
          &:first-child{
            margin-left: 0;
          }
      }
    }
  }
}
</style>


